<template>
  <div class="price">
    <Header></Header>
    <div class="section-list">
      <div class="section section1">
        <div class="section-inner main-container">
          <div class="tit-container">
            <div class="tit">
              更完善的知识变现闭环
              <br />更有效的线上教学效果
            </div>
            <div class="sub-tit">为教培机构、知识付费量身打造的全渠道闭环解决方案</div>
          </div>
          <div class="section-body">
            <div class="tabs">
              <div class="tab" @click="type=1" :class="{on:type==1}">标准版</div>
              <div class="tab" @click="type=2" :class="{on:type==2}">专业版</div>
              <div class="tab" @click="type=3" :class="{on:type==3}">旗舰版</div>
            </div>
            <div class="price-type">
              <el-row :gutter="40">
                <el-col v-if="type==1" :sm="{span:8}" :xs="24">
                  <div class="type-item">
                    <h3>标准版</h3>
                    <p class="desc">适合个人及五人以下运营团队 初步尝试直播、知识付费或线上直播、教学等</p>
                    <div class="extend-wrap">
                      <div class="price-bar">
                        <p class="price">
                          <small>¥</small>3,980
                          <small class="unit">/年</small>
                          <!-- <img class src="@/assets/img/img_10_8.png" alt /> -->
                        </p>
                        <p class="old-price">¥7,960/年</p>
                      </div>
                      <div class="btn-group">
                        <router-link :to="{name:'login'}" class="c-btn border">免费体验</router-link>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col v-if="type==2" :sm="{span:8}" :xs="24">
                  <div class="type-item">
                    <!-- <span class="label">荐</span> -->
                    <h3>专业版</h3>
                    <p class="desc">适合成长型直播、知识付费或教育机构 进行系统性的线上线下业务模式</p>
                    <div class="extend-wrap">
                      <div class="price-bar">
                        <p class="price">
                          <small>¥</small>6,980
                          <small class="unit">/年</small>
                          <!-- <img class src="@/assets/img/img_10_8.png" alt /> -->
                        </p>
                        <p class="old-price">¥13,960/年</p>
                      </div>
                      <div class="btn-group">
                        <router-link :to="{name:'login'}" class="c-btn border">免费体验</router-link>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col v-if="type==3" :sm="{span:8}" :xs="24">
                  <div class="type-item">
                    <!---->
                    <h3>旗舰版</h3>
                    <p class="desc">适合成熟型直播、知识付费及教育机构， 进行规模化商业变现、教学、企业品牌传播等</p>
                    <div class="extend-wrap">
                      <div class="price-bar">
                        <p class="price">
                          <small>¥</small>15,800
                          <small class="unit">/年</small>
                          <!-- <img class src="@/assets/img/img_10_8.png" alt /> -->
                        </p>
                        <p class="old-price">¥31,600/年</p>
                      </div>
                      <div class="btn-group">
                        <router-link :to="{name:'login'}" class="c-btn border">免费体验</router-link>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="section section2">
        <div class="section-inner main-container">
          <div class="tit-container">
            <div class="tit">方案对比与功能详情</div>
          </div>
          <div class="section-body">
            <transition name="fade">
              <div class="info-bar" v-if="showFloor">
                <div class="bar-wrap fixed">
                  <div class="center-helper main-container">
                    <table class="m-table">
                      <thead>
                        <tr>
                          <th colspan="4">
                            <span>{{index>9?index+1:'0'+(index+1)}}</span>
                            {{dataList[index].title}}
                          </th>
                          <th>标准版</th>
                          <th>专业版</th>
                          <th>旗舰版</th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                </div>
              </div>
            </transition>
            <div class="info-ctn">
              <template v-for="(table,index) in dataList">
                <table class="s-table" v-show="index<1||openmore" :key="table.title">
                  <thead>
                    <tr>
                      <th colspan="4">
                        <span>{{index>=9?index+1:'0'+(index+1)}}</span>
                        {{table.title}}
                      </th>
                      <th>
                        <template v-if="index==0">标准版</template>
                      </th>
                      <th>
                        <template v-if="index==0">专业版</template>
                      </th>
                      <th>
                        <template v-if="index==0">旗舰版</template>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in table.list" :key="item.name">
                      <td colspan="4">{{item.name}}</td>
                      <td
                        v-if="item.hasOwnProperty('standard')"
                        :rowspan="item.standard_rowspan || 1"
                        :class="{rowspan:item.standard_rowspan>1}"
                        :style="{color:item.style&&item.style.color?item.style.color:''}"
                      >
                        <template v-if="typeof item.standard == 'boolean'">
                          <i v-if="item.standard" class="el-icon-check blue"></i>
                          <i v-else class="el-icon-close"></i>
                        </template>
                        <template v-else-if="typeof item.standard == 'string'">
                          <span>{{item.standard}}</span>
                        </template>
                      </td>
                      <td
                        v-if="item.hasOwnProperty('professional')"
                        :rowspan="item.professional_rowspan || 1"
                        :class="{rowspan:item.professional_rowspan>1}"
                        :style="{color:item.style&&item.style.color?item.style.color:''}"
                      >
                        <template v-if="typeof item.professional == 'boolean'">
                          <i v-if="item.professional" class="el-icon-check blue"></i>
                          <i v-else class="el-icon-close"></i>
                        </template>
                        <template v-else-if="typeof item.professional == 'string'">
                          <span>{{item.professional}}</span>
                        </template>
                      </td>
                      <td :style="{color:item.style&&item.style.color?item.style.color:''}">
                        <template v-if="typeof item.flagship == 'boolean'">
                          <i v-if="item.flagship" class="el-icon-check blue"></i>
                          <i v-else class="el-icon-close"></i>
                        </template>
                        <template v-else-if="typeof item.flagship == 'string'">
                          <span>{{item.flagship}}</span>
                        </template>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </template>
            </div>
            <div class="openmore" @click="openmore=!openmore">
              {{!openmore?'查看更多':'收起'}}
              <i
                :class="!openmore?'el-icon-arrow-down':'el-icon-arrow-up'"
              ></i>
            </div>
            <transition name="fade">
              <div class="fix-nav" style v-if="showFloor">
                <ul>
                  <li
                    v-for="(table,i) in dataList"
                    :key="table.title"
                    :class="{active:i==index}"
                    @click="scrollTo(i)"
                  >{{table.title}}</li>
                </ul>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
    <fixed-btn></fixed-btn>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import FixedBtn from "@/components/FixedBtn";

import dataList from "@/assets/js/data";
//import $ from "jquery";

export default {
  name: "price",
  components: {
    Header,
    Footer,
    FixedBtn
  },
  data() {
    return {
      dataList: dataList,
      showFloor: false,
      index: 0,
      type: 1,
      openmore: false
    };
  },
  methods: {
    scrollTo(i) {
      $("html,body").animate(
        {
          scrollTop:
            $(".s-table")
              .eq(i)
              .offset().top -
            $(".header").height() +
            10
        },
        800
      );
    }
  },
  mounted() {
    let infoCtnWrap = document.querySelector(".info-ctn");
    let section2Wrap = document.querySelector(".section2");
    let tables = document.querySelectorAll(".s-table");
    let header = document.querySelector(".header");
    let footer = document.querySelector(".footer");

    let onscrollHandle = e => {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > infoCtnWrap.offsetTop - header.offsetHeight) {
        this.showFloor = true;
      } else {
        this.showFloor = false;
      }
      let nav = document.querySelector(".fix-nav");
      if (nav) {
        var top = 730 + scrollTop;
        if (footer.offsetTop < top + 50) {
          nav.style.top = "unset";
          nav.style.bottom =
            document.documentElement.clientHeight -
            (footer.offsetTop - scrollTop) +
            50 +
            "px";
        } else {
          nav.style.bottom = "unset";
          nav.style.top = "180px";
        }
      }
      for (var i = 0; i < tables.length; i++) {
        if (
          scrollTop > tables[i].offsetTop - header.offsetHeight &&
          scrollTop <
            tables[i].offsetTop - header.offsetHeight + tables[i].offsetHeight
        ) {
          this.index = i;
          break;
        }
      }
    };
    onscrollHandle();
    window.addEventListener("scroll", onscrollHandle);
  }
};
</script>

<style lang="scss" scoped>
.section-list {
  .section {
    background-color: #fafafa;

    &:nth-child(odd) {
      background-color: #fafafa;
    }

    .section-inner {
      .section-body {
      }
    }

    &.section1 {
      .section-inner {
        overflow: initial;

        .section-body {
          .tabs {
            display: flex;
            justify-content: center;
            margin: 24px;

            .tab {
              margin: 0 8px;
              width: 80px;
              height: 30px;
              font-size: 14px;
              border-radius: 26px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              background: #fff;
              color: rgba(254, 132, 1, 1);
              border: 1px solid rgba(254, 132, 1, 1);
              &.on {
                background: rgba(254, 132, 1, 1);
                color: #fff;
              }
            }
          }
          .price-type {
            display: flex;
            justify-content: center;
            margin: 20px 0 0;
            .type-item {
              margin: 0 auto 20px;
              max-width: 317px;
              height: 430px;
              text-align: center;
              border-radius: 4px;
              background: #fff;
              box-shadow: 0 5px 15px rgba(108, 152, 240, 0.3);
              position: relative;
              box-sizing: border-box;
              overflow: hidden;
              padding: 0 50px;
              border: 1px solid transparent;
              transition: all 0.2s;
            }

            /* .price-type .type-item:hover,
            .type-item.active {
              box-shadow: 0 0 20px rgba(108, 152, 240, 0.5);
              border-color: #fe8401;
            } */
            /* .type-item:nth-child(3) .price p {
              font-size:16px;
            } */

            .label {
              position: absolute;
              right: 20px;
              top: 0;
              background: #fbdd9e;
              width: 44px;
              height: 58px;
              color: #be9642;
              font-size: 20px;
              padding-top: 12px;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
            }

            .label:before {
              content: "";
              display: block;
              border: 22px solid #fff;
              position: absolute;
              bottom: 0;
              border-bottom-width: 10px;
              border-color: transparent transparent #fff;
            }

            h3 {
              font-weight: 500;
              line-height: 1em;
              margin-top: 33px;
              font-size: 18px;
              color: #333;
            }

            .price-bar {
              padding: 67px 0 26px;
            }

            .price-bar .price {
              color: #fe8401;
              font-size: 33px;
              position: relative;

              img {
                position: absolute;
                top: -40px;
                left: 100px;
              }
            }

            .price-bar small {
              font-size: 18px;
              color: #d8d8d8;
              margin: 0 5px;
              position: relative;
              top: -1px;
            }

            .price-bar small.unit {
              color: #fe8401;
              margin: 0;
            }

            .price-bar .old-price {
              font-size: 16px;
              margin-top: 15px;
              color: #8a8a8a;
              text-decoration: line-through;
            }

            .desc {
              color: #999;
              font-size: 14px;
              line-height: 22px;
              margin: 16px auto 0;
            }

            .btn-group {
              margin-bottom: 30px;
            }

            .btn-group .c-btn {
              width: 100%;
              height: 42px;
              line-height: 42px;
              font-size: 16px;
              text-align: center;
              border-radius: 4px;
              background: linear-gradient(90deg, #fe8401, #fe8401);
              color: #fff;
              display: inline-block;
              margin: 0 auto;
              padding: 0 28px;
              transition: all 0.2s;
              box-sizing: border-box;

              &:hover {
                border-color: #fe8401;
                color: #fff;
                background: linear-gradient(90deg, #fe8401, #fe8401);
              }
            }

            .btn-group .grey {
              border-color: #d1d1d1;
              color: #fff;
              background: #d1d1d1;
            }

            .btn-group .grey:hover {
              background: #d1d1d1;
            }

            .summary {
              margin-top: 40px;
            }

            .summary dt {
              font-size: 16px;
              color: #333;
              font-weight: bold;
              line-height: 16px;
              margin-top: 38px;
            }

            .summary dt:before {
              content: "";
              display: inline-block;
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background: #fe8401;
              position: relative;
              top: -3px;
              margin-right: 8px;
            }

            .summary dd {
              font-size: 14px;
              color: #333;
              line-height: 1em;
              margin-top: 18px;
            }

            .more-btn {
              display: block;
              font-size: 14px;
              color: #36aaff;
              line-height: 1em;
              margin-top: 18px;
              cursor: pointer;
            }

            .more-btn:hover {
              color: #0394ff;
            }

            .extend-wrap {
              border-top: 1px solid #eaeaea;
              position: absolute;
              bottom: 0;
              left: 40px;
              right: 40px;
            }
          }
        }
      }
    }

    &.section2 {
      .section-inner {
        // max-width: 80% !important;

        .section-body {
          padding-bottom: 3rem;

          .info-bar {
            z-index: 100;
          }

          .bar-wrap {
            z-index: 12;
          }

          .bar-wrap.fixed {
            position: fixed;
            left: 0;
            right: 0;
            top: 50px;
            background: rgba(255, 255, 255, 0.99);
            box-shadow: 0 0 20px -10px #000;
          }

          .bar-wrap.fixed th {
            border-bottom: none;
          }

          table {
            width: 100%;
          }

          table th,
          table td {
            padding: 0 10px;
          }

          .m-table {
            border-collapse: collapse;
          }

          .m-table th {
            border-bottom: 1px solid #ebebeb;
            font-weight: normal;
            white-space: nowrap;
            height: 50px;
          }

          .m-table th {
            font-size: 14px;
            text-align: center;

            &:nth-child(1) {
              text-align: left;
              font-size: 16px;
              color: #666;
              span {
                font-weight: bold;
                color: #999;
                margin-right: 4px;
              }
            }
            &:not(:first-child) {
              width: 100px;
            }
          }

          .info-ctn {
            overflow: hidden;
            transition: all 0.3s;
            background: #fff;
            margin: 0 12px;
            // box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);

            /* &:after {
                            content: "";
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            display: block;
                            width: 100%;
                            height: 270px;
                            background-image: linear-gradient(-180deg,
                                    rgba(255, 255, 255, 0),
                                    #fff);
                        } */

            &.active {
              position: static;
              max-height: 9999px;
            }

            &.active:after {
              display: none;
            }

            .s-table {
              border-collapse: collapse;
              tbody {
                tr:last-child {
                  td {
                    border: none;
                  }
                }
              }
              th {
                text-align: center;
                font-size: 14px;
                width: 150px;
                color: #000000;
                font-weight: normal;
                border-bottom: 1px solid #ebebeb;
                height: 50px;
                white-space: nowrap;
                &:nth-child(1) {
                  text-align: left;
                  font-size: 16px;
                  color: #666;
                }
                span {
                  font-weight: bold;
                  color: #999;
                  margin-right: 4px;
                }
              }

              tr:hover {
                background: #fafafa;
              }

              td {
                height: 50px;
                text-align: center;
                width: 150px;
                border-bottom: 1px solid #ebebeb;
                /* &:after {
                  position: absolute;
                  width: 100%;
                  height: 0.5px;
                  background: #ebebeb;
                  bottom: 0;
                  content: "";
                  display: block;
                } */

                &.rowspan {
                  border-left: 1px solid #ebebeb;
                  border-right: 1px solid #ebebeb;
                }
              }

              td:nth-child(1) {
                text-align: left;
                width: auto;
                font-size: 14px;
                color: #333;
                word-break: break-all;
              }

              td a,
              td span {
                white-space: pre-wrap;
                font-size: 12px;
                line-height: 1.4;
              }

              td i {
                font-size: 24px;
              }
            }

            .el-icon-minus,
            .el-icon-check {
              font-weight: bold;
            }

            .tips-ico {
              width: 16px;
              height: 16px;
              vertical-align: middle;
              position: relative;
              top: -2px;
              display: inline-block;
              background: url()
                no-repeat center center;
              background-size: 100% 100%;
              margin-left: 5px;
            }

            .blue {
              color: #fe8401;
            }

            .grey {
              color: #d1d1d1;
            }

            .version-text .m {
              font-size: 16px;
              line-height: 1em;
              color: #0072ff;
            }

            .version-text .s {
              font-size: 14px;
              color: #d8d8d8;
              line-height: 1em;
              margin-top: 8px;
            }

            .pointer {
              cursor: pointer;
            }
          }
          .openmore {
            width: 100px;
            margin: auto;
            background: #fff;
            text-align: center;
            padding: 6px 0;
            font-size: 14px;
            border-radius: 0 0 5px 5px;
          }
          .fix-nav {
            background-color: rgba(250, 250, 250, 0.9);
            padding: 10px 0;
            position: fixed;
            left: 50%;
            z-index: 11;
            top: 180px;
            margin-left: -610px;
          }

          .fix-nav ul {
            border-right: 1px solid #e9e9e9;
            padding: 2px 10px 2px 0;
          }

          .fix-nav ul li {
            text-align: right;
            font-size: 14px;
            color: #999;
            line-height: 1em;
            white-space: nowrap;
            position: relative;
            cursor: pointer;
          }

          .fix-nav ul li:not(:last-child) {
            margin-bottom: 18px;
          }

          .fix-nav ul li.active,
          .fix-nav ul li:hover {
            color: #fe8401;
          }

          .fix-nav ul li.active:before,
          .fix-nav ul li:hover:before {
            content: "";
            display: block;
            position: absolute;
            right: -10px;
            top: -1px;
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            border-width: 8px 4px;
            border-style: solid;
            border-color: transparent transparent transparent #fe8401;
          }
        }
      }
    }
  }
}
</style>